import {HomeAPI} from 'api';
import {Card} from 'components/View/Card';
import React, {useCallback} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {STYLE_COLOR} from 'variables';

const InfoActivityView = ({
  infoActivity,
}: {
  infoActivity: HomeAPI.ActivityInfo;
}) => {
  const goto = useCallback(() => {}, []);

  if (infoActivity?.functions.length === 0) {
    return null;
  }
  return (
    <React.Fragment>
      {!!infoActivity.title && (
        <View style={styles.gradientContainer}>
          <LinearGradient
            style={styles.linearGradient}
            colors={[STYLE_COLOR.THEME, STYLE_COLOR.THEME_GRADIENT]}
          />
          <Text style={styles.title}>{infoActivity.title}</Text>
          <Image
            source={require('assets/homePage/hot.png')}
            style={{width: 42, height: 16}}
          />
        </View>
      )}
      {infoActivity.functions.map((item, index) => (
        <Card
          key={index}
          shadow={true}
          onPress={() => goto}
          containerStyle={styles.hotItemContainer}
          wrapperStyle={{
            flexDirection: 'row',
          }}>
          <View
            style={{
              flex: 1,
              paddingVertical: 16,
              paddingLeft: 16,
              paddingRight: 12,
            }}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text
                style={{
                  fontSize: 18,
                  color: STYLE_COLOR.TEXT_MAIN,
                  fontWeight: 'bold',
                }}
                numberOfLines={1}>
                {item.title}
              </Text>
            </View>
            <Text
              numberOfLines={2}
              style={{
                marginTop: 4,
                lineHeight: 17,
                fontSize: 12,
                color: STYLE_COLOR.TEXT_GREY,
              }}>
              {item.summary}
            </Text>
          </View>
          <View style={{justifyContent: 'center', marginRight: 8}}>
            <Image
              source={{uri: item.icon}}
              style={{
                width: 90,
                height: 75,
              }}
            />
          </View>
          {!!item.corner_icon && (
            <Image source={{uri: item.corner_icon}} style={styles.label} />
          )}
        </Card>
      ))}
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  gradientContainer: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  linearGradient: {
    width: 4,
    height: 20,
    borderRadius: 1,
  },
  title: {
    marginHorizontal: 8,
    fontWeight: 'bold',
    fontSize: 17,
    color: STYLE_COLOR.TEXT_MAIN,
  },
  hotItemContainer: {
    marginTop: 0,
    paddingHorizontal: 0,
    paddingVertical: 0,
  },
  label: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 52,
    height: 52,
    zIndex: 100,
  },
});

export default InfoActivityView;
